<template>
  <div class="chart-wrapper">
    <h2>{{ title }}</h2>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'LineChart',
  props: {
    /**
     * 图表标题
     * @example '趋势数据分析'
     */
    title: {
      type: String,
      default: '',
    },

    /**
     * 图表唯一标识
     * @description 用于初始化图表实例，确保页面中唯一
     * @example 'trendLineChart'
     */
    chartId: {
      type: String,
      required: true,
    },

    /**
     * X轴分类数据
     * @description 用于显示在X轴上的分类标签
     * @example ['一月', '二月', '三月']
     */
    categories: {
      type: Array,
      required: true,
    },

    /**
     * Y轴数值数据
     * @description 用于显示的实际数据值
     * @example [100, 200, 300]
     */
    values: {
      type: Array,
      required: true,
    },

    /**
     * 数据系列名称
     * @description 用于图例和提示框显示
     * @example '增长趋势'
     */
    seriesName: {
      type: String,
      default: '',
    },

    /**
     * 图表主题色
     * @description 折线图的主要颜色
     * @example '#91cc75'
     */
    color: {
      type: String,
      default: '#91cc75',
    },

    /**
     * 是否平滑曲线
     * @description 控制折线是否平滑显示
     */
    smooth: {
      type: Boolean,
      default: false,
    },

    /**
     * 图表配置项
     * @description 图表的详细配置，包括提示框、坐标轴等
     */
    chartConfig: {
      type: Object,
      default: () => ({
        // 提示框配置
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        // 网格配置
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        // X轴配置
        xAxis: {
          show: true,
          axisLine: { show: true },
          axisTick: { show: true },
          axisLabel: {
            color: '#333',
            fontSize: 12,
          },
        },
        // Y轴配置
        yAxis: {
          show: true,
          axisLine: { show: true },
          axisTick: { show: true },
          axisLabel: {
            color: '#333',
            fontSize: 12,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        // 系列配置
        series: {
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            width: 3,
          },
          label: {
            show: false,
            position: 'top',
          },
          areaStyle: {
            opacity: 0.1,
          },
        },
      }),
    },

    /**
     * PPT导出配置
     * @description PPT导出时的样式和布局配置
     */
    pptOptions: {
      type: Object,
      default: () => ({
        // 图表位置和大小
        position: {
          x: 5.5,
          y: 1.7,
          w: 4.5,
          h: 3.5,
        },
        // 标题配置
        title: {
          x: 5.5,
          y: 1.2,
          fontSize: 16,
          color: '363636',
          bold: true,
        },
        // 图表配置
        chart: {
          showLegend: true,
          legendPos: 'b',
          showTitle: false,
          lineSize: 3,
          lineDataSymbol: 'circle',
          lineDataSymbolSize: 8,
          catAxisLineShow: true,
          valAxisLineShow: true,
        },
      }),
    },
  },

  data() {
    return {
      // echarts实例
      chart: null,
    };
  },

  methods: {
    /**
     * 初始化图表
     * @description 创建echarts实例并首次渲染
     */
    initChart() {
      const chartDom = document.getElementById(this.chartId);
      if (!chartDom) return;

      this.chart = echarts.init(chartDom);
      this.updateChart();
    },

    /**
     * 更新图表数据和配置
     * @description 根据props更新图表的数据和配置项
     */
    updateChart() {
      if (!this.chart) return;

      const option = {
        tooltip: this.chartConfig.tooltip,
        grid: this.chartConfig.grid,
        xAxis: {
          ...this.chartConfig.xAxis,
          type: 'category',
          data: this.categories,
        },
        yAxis: {
          ...this.chartConfig.yAxis,
          type: 'value',
        },
        series: [
          {
            name: this.seriesName,
            type: 'line',
            data: this.values,
            smooth: this.smooth,
            itemStyle: { color: this.color },
            symbol: this.chartConfig.series.symbol,
            symbolSize: this.chartConfig.series.symbolSize,
            lineStyle: {
              ...this.chartConfig.series.lineStyle,
              color: this.color,
            },
            label: this.chartConfig.series.label,
            areaStyle: {
              ...this.chartConfig.series.areaStyle,
              color: this.color,
            },
          },
        ],
      };

      this.chart.setOption(option);
    },

    /**
     * 调整图表大小
     * @description 在容器大小变化时自动调整图表大小
     */
    resizeChart() {
      this.chart && this.chart.resize();
    },

    /**
     * 导出为PPT
     * @description 将图表导出为PPT格式
     * @param {Object} pptx pptxgen实例
     * @param {Object} slide 当前幻灯片实例
     */
    exportToPPT(pptx, slide) {
      // 添加图表标题
      slide.addText(this.title, {
        x: this.pptOptions.title.x,
        y: this.pptOptions.title.y,
        fontSize: this.pptOptions.title.fontSize,
        color: this.pptOptions.title.color,
        bold: this.pptOptions.title.bold,
      });

      // 添加折线图
      slide.addChart(
        pptx.ChartType.line,
        [
          {
            name: this.seriesName,
            labels: this.categories,
            values: this.values,
          },
        ],
        {
          x: this.pptOptions.position.x,
          y: this.pptOptions.position.y,
          w: this.pptOptions.position.w,
          h: this.pptOptions.position.h,
          chartColors: [this.color.replace('#', '')],
          lineSize: this.pptOptions.chart.lineSize,
          showLegend: this.pptOptions.chart.showLegend,
          legendPos: this.pptOptions.chart.legendPos,
          showTitle: this.pptOptions.chart.showTitle,
          lineSmooth: this.smooth,
          lineDataSymbol: this.pptOptions.chart.lineDataSymbol,
          lineDataSymbolSize: this.pptOptions.chart.lineDataSymbolSize,
          catAxisLineShow: this.pptOptions.chart.catAxisLineShow,
          valAxisLineShow: this.pptOptions.chart.valAxisLineShow,
        }
      );
    },
  },

  watch: {
    /**
     * 监听数据变化
     * @description 当数据变化时自动更新图表
     */
    values: {
      handler() {
        this.updateChart();
      },
      deep: true,
    },
    categories: {
      handler() {
        this.updateChart();
      },
      deep: true,
    },
    chartConfig: {
      handler() {
        this.updateChart();
      },
      deep: true,
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart();
      window.addEventListener('resize', this.resizeChart);
    });
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    this.chart && this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="less" scoped>
.chart-wrapper {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;

  h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
  }

  .chart {
    height: 400px;
    width: 100%;
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .chart {
    height: 300px !important;
  }
}
</style>
